<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { FormProps } from "./components/types";
import { formRules } from "./components/rule";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    x: null,
    y: null,
    angle: null,
  }),
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 失去焦点时
function inputBlur(val) {
  let value = val.target.value
  let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/;
  if (!exp.test(value)) {
    val.target.value = null
  } else {
    Number(val.target.value)
  }
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24" >
        <el-form-item label="X轴:" prop="x">
          <el-input-number v-model="newFormInline.x" controls-position="right" placeholder="请输入X轴" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" >
        <el-form-item label="Y轴:" prop="y">
          <el-input-number v-model="newFormInline.y" controls-position="right" placeholder="请输入Y轴" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" >
        <el-form-item label="角度:" prop="angle">
          <el-input-number v-model="newFormInline.angle" controls-position="right" placeholder="请输入角度" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio{
  margin-right: 16px;
}
</style>
